| Conditions | 9 |
| Total Lines | 108 |
| Code Lines | 93 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | import { stopLocationUpdatesAsync } from "expo-location"; |
||
| 10 | |||
| 11 | export default function ScooterModal({navigation, scooter, modalVisible, setModalVisible, currentCity, setJourneyModal, setToggleTimer}) { |
||
| 12 | const [scooterName, setScooterName] = useState(null); |
||
| 13 | const [scooterNumber, setScooterNumber] = useState(null); |
||
| 14 | const [battery, setBattery] = useState(null); |
||
| 15 | const [fixedRate, setFixedRate] = useState(null); |
||
| 16 | const [timeRate, setTimeRate] = useState(null); |
||
| 17 | const [scooterId, setScooterId] = useState(null); |
||
| 18 | |||
| 19 | const batteryImages = { |
||
| 20 | '100': require('../../assets/battery_100.png'), |
||
| 21 | '75': require('../../assets/battery_75.png'), |
||
| 22 | '50': require('../../assets/battery_50.png'), |
||
| 23 | '25': require('../../assets/battery_25.png') |
||
| 24 | } |
||
| 25 | |||
| 26 | function getBattery(batteryPercentage) { |
||
| 27 | if (batteryPercentage >= 75) { |
||
| 28 | return '100' |
||
| 29 | } else if (batteryPercentage >= 50) { |
||
| 30 | return '75' |
||
| 31 | } else if (batteryPercentage >= 25) { |
||
| 32 | return '50' |
||
| 33 | } else { |
||
| 34 | return '25' |
||
| 35 | } |
||
| 36 | }; |
||
| 37 | |||
| 38 | useEffect(() => { |
||
| 39 | function getScooterInfo(): void { |
||
| 40 | if (scooter) { |
||
| 41 | const title = scooter['name'].split('#'); |
||
| 42 | setScooterName(title[0]); |
||
| 43 | setScooterNumber(title[1]); |
||
| 44 | setBattery(getBattery(scooter['battery'])); |
||
| 45 | setScooterId(scooter['_id']); |
||
| 46 | |||
| 47 | setFixedRate(currentCity['taxRates']['fixedRate']); |
||
| 48 | setTimeRate(currentCity['taxRates']['timeRate']); |
||
| 49 | } |
||
| 50 | } |
||
| 51 | getScooterInfo(); |
||
| 52 | }); |
||
| 53 | |||
| 54 | |||
| 55 | async function startJourney() { |
||
| 56 | const result = await scooterModel.startScooter(scooterId); |
||
| 57 | |||
| 58 | if (Object.prototype.hasOwnProperty.call(result, 'errors')) { |
||
| 59 | showMessage({ |
||
| 60 | message: result['errors']['title'], |
||
| 61 | type: 'danger' |
||
| 62 | }) |
||
| 63 | |||
| 64 | return; |
||
| 65 | }; |
||
| 66 | |||
| 67 | showMessage({ |
||
| 68 | message: result['message'], |
||
| 69 | type: 'success' |
||
| 70 | }); |
||
| 71 | |||
| 72 | setModalVisible(!modalVisible); |
||
| 73 | setJourneyModal(true); |
||
| 74 | }; |
||
| 75 | |||
| 76 | return ( |
||
| 77 | <GestureRecognizer |
||
| 78 | style={{flex: 1}} |
||
| 79 | onSwipeDown={ () => setModalVisible(false) } |
||
| 80 | > |
||
| 81 | <Modal |
||
| 82 | animationType="slide" |
||
| 83 | transparent={true} |
||
| 84 | visible={modalVisible} |
||
| 85 | onRequestClose={() => { |
||
| 86 | setModalVisible(!modalVisible) |
||
| 87 | }} |
||
| 88 | |||
| 89 | > |
||
| 90 | <View style={styles.modalContainer}></View> |
||
| 91 | |||
| 92 | |||
| 93 | <View style={styles.modalMessage}> |
||
| 94 | <View style={styles.swipeButton}></View> |
||
| 95 | |||
| 96 | <View style={styles.titleContainer}> |
||
| 97 | <Image style={styles.scooterImage} source={require('../../assets/scooter2.png')}></Image> |
||
| 98 | |||
| 99 | <View style={styles.textContainer}> |
||
| 100 | <Text style={styles.scooterTitle}> {scooterName} {scooterNumber}</Text> |
||
| 101 | <Image style={styles.battery} source={batteryImages[`${battery}`]}></Image> |
||
| 102 | </View> |
||
| 103 | |||
| 104 | </View> |
||
| 105 | |||
| 106 | <Pressable style={styles.tourButton} onPress={() => { |
||
| 107 | startJourney(); |
||
| 108 | setToggleTimer(true); |
||
| 109 | }}> |
||
| 110 | <Text style={{color: 'white'}}>Start tour</Text> |
||
| 111 | </Pressable> |
||
| 112 | |||
| 113 | <Text style={{color: 'grey'}}> {fixedRate} kr unlocking + {timeRate} kr / min. </Text> |
||
| 114 | |||
| 115 | </View> |
||
| 116 | </Modal> |
||
| 117 | </GestureRecognizer> |
||
| 118 | ) |
||
| 190 | }) |